<template>
  <div class="avatar"></div>
</template>

<script setup lang="ts"></script>

<style scoped>
.avatar {
  background-image: url(@/assets/avatar.jpg);
  background-size: cover;
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 50%;
  position: relative;
  /* transform: rotateX(45deg); */
  &::before,
  &::after {
    content: "";
    width: 100%;
    height: 100%;

    position: absolute;
    /* top right bottom left 全为0 */
    inset: 0;
    border-radius: inherit;
  }
  &::before {
    background-color: rgba(0, 0, 0, 0.5);
  }
  &::after {
    background: inherit;
    background-size: inherit;
    /* circle(裁剪半径 at 圆心x轴 圆心y轴) */
    clip-path: circle(0% at 50% 50%);
    transition: all 0.5s;
  }

  &:hover::after {
    clip-path: circle(100% at 50% 50%);
    box-shadow: 10px 20px 35px -8px rgba(0, 0, 0, 0.5);
    transform: perspective(500px) translate3d(0, 0, 50px) rotateX(-20deg);
  }
}
</style>
